<template>
<main style="width: 60%;margin: 40px auto 0 auto;">

  <el-timeline v-if="state.historyList.length>0">
    <el-timeline-item :timestamp="history.createTime" placement="top" v-for="history in state.historyList" :key="history.id">
      <el-card style="--el-card-padding: 10px;">
        <VideoCard  :height="'130px'"  :flex="'row'" :width="'40%'" :video="history.video" :currentTime="history.time" :isHistory="true">
          <template #history>
            观看到{{secondFormat(history.time)}}
          </template>
        </VideoCard>
      </el-card>
    </el-timeline-item>
  </el-timeline>
  <el-empty v-else description="暂未有观影记录" >
    <el-button type="primary" text @click="router.push(`/play/${hi}`)">去看影片</el-button>
  </el-empty>

</main>
</template>

<script setup>
import VideoCard from "@/components/VideoCard.vue";
import HistoryApi from "@/api/HistoryApi.js";
import {onMounted, reactive} from "vue";
import {useRouter} from "vue-router";
import {secondFormat} from "@/utils/utils.js";
const router = useRouter()
const state = reactive({
  historyList:[],
  queryDto:{
    pageNum:1,
    size:10,
    userId:1433223
  }
})
const getHistoryList = ()=>{
  HistoryApi.getUserHistory(state.queryDto).then(res=>{
    state.historyList = res.data.data
  })
}
onMounted(()=>{
  getHistoryList()
})
</script>
